ScreenShield: animate new notifications

Showing the new message at full size marks an abrubt change and looks
bad. Instead, gradually animate from 0px to full natural height.
Includes hacks to workaround flickering scrollbars while the animation
is in progress.

https://bugzilla.gnome.org/show_bug.cgi?id=687660

diff --git a/js/ui/screenShield.js b/js/ui/screenShield.js
index b99645e237df1671b6309cbd40dcea0cce01c48b..f85871f7a8beda1f53816e62bbf4d863e0d9090c 100644 (file)
--- a/js/ui/screenShield.js
+++ b/js/ui/screenShield.js
@@ -106,14 +106,14 @@ const NotificationsBox = new Lang.Class({
         this._musicBin = new St.Bin({ style_class: 'screen-shield-notifications-box',
                                       visible: false });
 
-        let scrollView = new St.ScrollView({ x_fill: false, x_align: St.Align.START,
-                                             hscrollbar_policy: Gtk.PolicyType.NEVER });
+        this._scrollView = new St.ScrollView({ x_fill: false, x_align: St.Align.START,
+                                               hscrollbar_policy: Gtk.PolicyType.NEVER });
         this._notificationBox = new St.BoxLayout({ vertical: true,
                                                    style_class: 'screen-shield-notifications-box' });
-        scrollView.add_actor(this._notificationBox);
+        this._scrollView.add_actor(this._notificationBox);
 
         this.actor.add(this._musicBin);
-        this.actor.add(scrollView, { x_fill: true, x_align: St.Align.START });
+        this.actor.add(this._scrollView, { x_fill: true, x_align: St.Align.START });
 
         this._sources = new Hash.Map();
         Main.messageTray.getSources().forEach(Lang.bind(this, function(source) {
@@ -239,7 +239,7 @@ const NotificationsBox = new Lang.Class({
             (source.unseenCount > (musicNotification ? 1 : 0));
     },
 
-    _sourceAdded: function(tray, source, dontUpdateVisibility) {
+    _sourceAdded: function(tray, source, initial) {
         // Ignore transient sources
         if (source.isTransient)
             return;
@@ -286,8 +286,27 @@ const NotificationsBox = new Lang.Class({
 
         this._sources.set(source, obj);
 
-        if (!dontUpdateVisibility)
+        if (!initial) {
+            // block scrollbars while animating, if they're not needed now
+            let boxHeight = this._notificationBox.height;
+            if (this._scrollView.height >= boxHeight)
+                this._scrollView.vscrollbar_policy = Gtk.PolicyType.NEVER;
+
+            let widget = obj.sourceBox;
+            let [, natHeight] = widget.get_preferred_height(-1);
+            widget.height = 0;
+            Tweener.addTween(widget,
+                             { height: natHeight,
+                               transition: 'easeOutQuad',
+                               time: 0.25,
+                               onComplete: function() {
+                                   this._scrollView.vscrollbar_policy = Gtk.PolicyType.AUTOMATIC;
+                                   widget.set_height(-1);
+                               },
+                               onCompleteScope: this
+                             });
             this._updateVisibility();
+        }
     },
 
     _titleChanged: function(source, obj) {